import { useNavigate } from 'react-router-dom';
import PropTypes from 'prop-types';
import React from 'react';
import { useCity } from '../utils/city';

export const SearchBar = ({ styles }) => {
  const history = useNavigate();

  const [cityValue, cityLabel] = useCity();
  console.log(cityValue, cityLabel);

  return (
    <div className={styles.searchBar}>
      <div className={styles.search}>
        <span onClick={() => history('/citylist')}>{cityLabel}</span>
        <i className="iconfont icon-arrow" />
        <div className={styles.form} onClick={() => history('/home/search')}>
          <i className="iconfont icon-seach" />
          <span className={styles.span}>请输入小区或地址</span>
        </div>
      </div>
      <i className="iconfont icon-map" onClick={() => history('/map')} />
    </div>
  );
};

SearchBar.propTypes = {
  styles: PropTypes.object,
};
